<template>
  <div>
    <!-- 筛选区域 -->
    <div class="filter_box">
      <div class="filter_form">
        <FilterContainer @filter="filter" :columnArr="columnArr" :search="search"></FilterContainer>
      </div>
      <el-button v-if="add" type="primary" size="medium" icon="el-icon-plus" @click.stop="addFrom">新增</el-button>
    </div>
    <!-- 表格 -->
    <el-table 
      max-height="600px" 
      border 
      :data="tableData"
      @select="select"
      @select-all="select_all"
      size="small">
      <el-table-column
        v-if="checkBox"
        type="selection"
        width="55">
      </el-table-column>
      <template v-for="(item,index) in columnArr">
        <el-table-column :resizable="false" :key="index" align="center" v-if="!item.disable || item.disable==undefined" :label="item.name" :prop="item.prop" :width="item.width">
          <template v-slot="scope">
            <div>
              <div v-if="item.type=='table_slot'">
                <slot :[item.slotName]="scope.row" :name="item.slotName"></slot>
              </div>
              <div v-else-if="item.type=='select'">
                <span>{{formatSelect(item.options,scope.row[item.prop],item.optionKey || "key",item.optionValue || "value")}}</span>
              </div>
              <div v-else>
                <img @click.stop="viewImg(scope.row[item.prop])" v-if="item.type=='img'" :src="scope.row[item.prop]" alt :height="imgHeight+'px'" />
                <span v-else>{{scope.row[item.prop]}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </template>
      <el-table-column :resizable="false" v-if="remove || edit || option.length > 0" label="操作">
        <template v-slot="scope">
          <div class="option-box">
            <template v-if="remove">
              <el-button @click.stop="removeItem(scope.row)" size="mini" type="danger">删除</el-button>
            </template>
            <template v-if="edit">
              <el-button @click.stop="updataItem(scope.row)" size="mini" type="primary">编辑</el-button>
            </template>
            <template>
              <div class="item" v-for="(item,index) in option" :key="index">
                <template v-if="item.type=='option_slot'">
                  <slot :[item.slotName]="scope.row" :name="item.slotName"></slot>
                </template>
                <template v-else>
                  <el-button @click.stop="clickOption(scope.row,item.methods)" size="mini" :type="item.type">{{item.name}}</el-button>
                </template>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="currentPage" 
      :page-sizes="[size*1, size*2, size*3, size*4]" 
      :page-size="size" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
    </el-pagination>
    <!-- 图片放大预览 -->
    <el-dialog :visible="showViewImg" width="800px">
      <img :src="viewImgUrl" alt />
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog title="新增" v-model="showAdd" :fullscreen="false" width="40%" :close-on-click-modal="false">
      <CreateContainer :close="closeAdd" :submit="addSubmit" :columnArr="columnArr"></CreateContainer>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog title="编辑" :visible="showUpdate">
      <div class="add-form-box">
        <el-row>
          <el-col v-for="(item,index) in columnArr" :key="index" :span="item.formSpan?item.formSpan:12">
            <div class="form-item" :key="index" v-if="item.add || item.add == undefined ">
              <span :style="item.lableWidth?'width:'+item.lableWidth+'px':'width:50px'">{{item.name}}</span>
              <el-select v-if="item.type=='select' && item.options" v-model="form_update[item.prop]" placeholder="请选择">
                <el-option
                  v-for="(it,i) in item.options"
                  :key="i"
                  :label="it[item.optionValue || 'value']"
                  :value="it[item.optionKey || 'key']">
                </el-option>
              </el-select>
              <el-input v-else v-model="form_update[item.prop]"></el-input>
            </div>
          </el-col>
        </el-row>
      </div>
      <span class="dialog-footer">
        <el-button @click="showUpdate = false">取 消</el-button>
        <el-button type="primary" @click="updataSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script src="./table.ts"></script>
<style lang="less">
.el-dialog__body{
  padding: 10px;
}
.option-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .item {
    &:first-child {
      margin-left: 0;
    }
    margin-left: 10px;
  }
}
.filter_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  .filter_form{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
.add-form-box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>